<section ng-controller="TopicController">

    <ol class="breadcrumb">
        <li><a href="#/">home</a></li>
        <li><a href="#/groups">groups</a></li>
        <li><a ng-href="#/groups/{{groupName}}">{{groupName}}</a></li>
        <li class="active">{{topicName}}</li>
    </ol>

    <div class="pull-right">
        <span bind-html="config.buttonsExtension"></span>
        <button class="btn btn-primary" ng-click="edit()">Edit</button>
        <button class="btn btn-primary" ng-click="clone()">Clone</button>
        <button class="btn btn-warning" ng-click="blacklist()" ng-show="!isBlacklisted">Blacklist</button>
        <button class="btn btn-default" ng-click="unblacklist()" ng-show="isBlacklisted">Unblacklist</button>
        <button class="btn btn-danger" ng-click="remove()">Remove</button>
    </div>

    <h1><small>Topic:</small> {{topic.name}}</h1>

    <div class="pull-right ng-hide" ng-show="config.authEnabled">
        <div uib-popover="Authorisation is enabled for this topic." popover-trigger="mouseenter"
             ng-show="topic.auth.enabled && !topic.auth.unauthenticatedAccessEnabled" class="ng-hide badge alert-success">
            Secured <span class="glyphicon glyphicon-lock"></span>
        </div>
        <div uib-popover="Currently anyone is allowed to publish on this topic without authentication. Consider enabling authorisation." popover-trigger="mouseenter"
             ng-show="topic && !topic.auth.enabled || topic.auth.unauthenticatedAccessEnabled" class="ng-hide badge alert-warning">
            Unauthenticated access allowed <span class="glyphicon glyphicon-alert"></span>
        </div>
    </div>

    <h3><small>Owner ({{topic.owner.source}}):</small> <owner-name owner="topic.owner"/></h3>

    <p class="lead">{{topic.description}}</p>

    <div class="alert alert-danger" role="alert" ng-show="isBlacklisted">
        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
        The topic has been blacklisted - contact Hermes admins why publishing returns 403's.
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">Metrics</h3>
                </div>
                <div class="panel-body">
                    <p><strong><a ng-href="{{metricsUrls.rate}}">Rate:</a></strong> {{metrics.rate | number:2}}</p>
                    <p><strong><a ng-href="{{metricsUrls.deliveryRate}}">Delivery rate:</a></strong> {{metrics.deliveryRate | number:2}}</p>
                    <p><strong><a ng-href="{{metricsUrls.published}}">Published:</a></strong> {{metrics.published}}</p>
                    <p><strong><a ng-href="{{metricsUrls.latency}}">Latency</a></strong></p>
                    <p><strong><a ng-href="{{metricsUrls.messageSize}}">Message size</a></strong></p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Properties</h3>
                </div>
                <div class="panel-body">
                    <p>
                        <strong>Content type:</strong> {{topic.contentType}}
                    </p>
                    <p>
                        <strong>Acknowlegment:</strong> {{topic.ack == 'ALL' ? 'all brokers' : 'leader only'}}
                        <span uib-popover='Specifies the strength of guarantees that acknowledged message was indeed persisted. In "Leader" mode ACK is required only from topic leader, which is fast and gives 99.99999% guarantee. It might be not enough when cluster is unstable. "All" mode means message needs to be saved on all replicas before sending ACK, which is quite slow but gives 100% guarantee that message has been persisted.' popover-trigger="mouseenter" class="fa helpme pull-right">&#xf128;</span>
                    </p>
                    <p>
                        <strong>Retention time:</strong> {{topic.retentionTime.duration}} days
                        <span uib-popover='For how many days message is available for subscribers after being published.' popover-trigger="mouseenter" class="fa helpme pull-right">&#xf128;</span>
                    </p>
                    <p><strong>Tracking enabled:</strong> {{topic.trackingEnabled}}</p>
                    <p><strong>Max message size:</strong> {{topic.maxMessageSize | readableSize}}</p>

                    <div class="ng-hide" ng-show="config.authEnabled">
                        <hr />
                        <p>
                            <strong>Authorisation enabled:</strong> {{topic.auth.enabled}}
                        </p>
                        <p>
                            <strong>Authorised publishers:</strong> {{topic.auth.publishers.join(', ')}}
                            <span uib-popover='When authorisation is enabled, only authenticated services are allowed to publish on this topic.' popover-trigger="mouseenter" class="fa helpme pull-right">&#xf128;</span>
                        </p>
                        <p>
                            <strong>Allow unauthenticated access:</strong> {{topic.auth.unauthenticatedAccessEnabled}}
                            <span uib-popover='Allowing unauthenticated access should be enabled only when migrating topic to authorised, so both authenticated and unauthenticated clients are allowed to publish simultaneously.' popover-trigger="mouseenter" class="fa helpme pull-right">&#xf128;</span>
                        </p>
                    </div>
                    <hr />
                    <p>
                        <strong>Restrict subscribing:</strong> {{topic.subscribingRestricted}}
                        <span uib-popover='When subscribing is restricted, only owner of this topic can create new subscriptions.' popover-trigger="mouseenter" class="fa helpme pull-right">&#xf128;</span>
                    </p>

                    <hr />
                    <p>
                        <strong>Store offline:</strong> {{topic.offlineStorage.enabled}}
                        <span uib-popover='Should data from this topic be stored in offline storage (e.g. HDFS).' popover-trigger="mouseenter" class="fa helpme pull-right">&#xf128;</span>
                    </p>
                    <p ng-show="topic.offlineStorage.enabled">
                        <strong>Offline retention:</strong> {{topic.offlineStorage.retentionTime.infinite ? 'infinite' : topic.offlineStorage.retentionTime.duration + ' days'}}
                        <span uib-popover='For how long should this topic be stored in offline storage.' popover-trigger="mouseenter" class="fa helpme pull-right">&#xf128;</span>
                    </p>

                </div>
            </div>
        </div>
    </div>

    <div class="row" ng-show="topic.contentType == 'AVRO'">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div style="position: relative">
                    <span class="btn pull-right glyphicon {{showMessageSchema ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down' }}" ng-click="showMessageSchema = !showMessageSchema"></span>
                </div>
                <div class="panel-heading" ng-click="showMessageSchema = !showMessageSchema">
                    <h3 class="panel-title">Message schema</h3>
                </div>
                <div class="panel-body" uib-collapse="!showMessageSchema">
                    <pre class="pre-scrollable">{{ messageSchema }}</pre>
                </div>
            </div>
        </div>
    </div>

    <div class="row" ng-show="config.messagePreviewEnabled">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div style="position: relative">
                    <span class="btn pull-right glyphicon {{showMessageSchema ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down' }}" ng-click="showPreview = !showPreview"></span>
                </div>
                <div class="panel-heading" ng-click="showPreview = !showPreview">
                    <h3 class="panel-title">Topic messages preview</h3>
                </div>
                <div class="panel-body" uib-collapse="!showPreview">
                    <div class="pre-scrollable message-preview" ng-repeat="message in preview track by $index">
                        <pre class="content">{{message.content}}</pre>
                        <span class="truncated-info" ng-if="::(message.truncated)">(preview was too large and has been truncated)</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="list-group">
            <div class="list-group-item">
                <div class="pull-right">
                    <button class="btn btn-primary" ng-click="addSubscription()"><span class="glyphicon glyphicon-plus"></span></button>
                </div>
                <h4>
                    Subscriptions
                </h4>
            </div>
            <a ng-href="#/groups/{{groupName}}/topics/{{topicName}}/subscriptions/{{subscription.name}}" class="list-group-item" ng-repeat="subscription in subscriptions">
                <small>{{$index + 1}}</small>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                <strong>{{subscription.name}}</strong>
                <div class="pull-right">
                    <span class="label {{subscription.details.state === 'ACTIVE' ? 'label-success' : 'label-danger'}}" >{{subscription.details.state}}</span>
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </div>
            </a>
        </div>

        <div ng-show="subscriptionsFetching" class="text-center">
            <h1><i class="fa fa-circle-o-notch fa-spin"></i></h1>
        </div>
    </div>

    <div class="row" ng-if="config.offlineClientsEnabled">
        <div class="list-group">
            <div class="list-group-item">
                <h4>
                    Offline clients
                </h4>
            </div>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th></th>
                        <th>User</th>
                        <th>Last access date</th>
                        <th>Owners</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="client in clients">
                        <td>{{$index + 1}}</td>
                        <td>{{client.user}}</td>
                        <td>{{client.lastAccess}}</td>
                        <td>{{client.owners.join(", ")}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div ng-show="offlineClientsFetching" class="text-center">
            <h1><i class="fa fa-circle-o-notch fa-spin"></i></h1>
        </div>
    </div>

</section>
